<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="/plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="/plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="/css/myAnimate.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/animate.css" />
    <link rel="stylesheet" href="/css/fonts/iconfont.css" />
    <link
      rel="stylesheet"
      href="/plugin/bootstrap/dist/datepicker/datetimepicker.min.css"
    />
    <link rel="stylesheet" href="/plugin/bootstrap/dist/select/select.css" />
    <link rel="stylesheet" href="/css/theme_red.css" />
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/datepicker/datetimepicker.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/select/select.js"
    ></script>
    <script type="text/javascript" src="/plugin/layui/layui.js"></script>
    <style>
      .echartsBox {
        height: 300px;
      }
    </style>
  </head>
  <body class="child_body">
    <div class="comModal m-b-15">
      <div class="comTitle_null flex items-center">
        <div class="titleText">数据信息</div>
      </div>
      <div class="flex">
        <div class="flex flex-1 items-center dataStatusBox">
          <div class="flex items-center justify-center statusItem">
            <span class="iconfont icon-chuzhijieguo green"></span>
            <div class="textBox">
              <div class="text">已派发</div>
              <div class="number fs20">135</div>
            </div>
          </div>
          <div class="flex-1 flex wrap">
            <div
              class="flex items-center justify-center statusItem2 border-right border-bottom"
            >
              <span class="iconfont icon-chuzhijieguo orange"></span>
              <div class="textBox">
                <div class="text">已派发</div>
                <div class="number fs20 gray_999">135</div>
              </div>
            </div>
            <div
              class="flex items-center justify-center statusItem2 border-right border-bottom"
            >
              <span class="iconfont icon-chuzhijieguo"></span>
              <div class="textBox">
                <div class="text">已派发</div>
                <div class="number fs20">135</div>
              </div>
            </div>
            <div
              class="flex items-center justify-center statusItem2 border-bottom"
            >
              <span class="iconfont icon-chuzhijieguo"></span>
              <div class="textBox">
                <div class="text">已派发</div>
                <div class="number fs20">135</div>
              </div>
            </div>
            <div
              class="flex items-center justify-center statusItem2 border-right"
            >
              <span class="iconfont icon-chuzhijieguo"></span>
              <div class="textBox">
                <div class="text">已派发</div>
                <div class="number fs20">135</div>
              </div>
            </div>
            <div
              class="flex items-center justify-center statusItem2 border-right"
            >
              <span class="iconfont icon-chuzhijieguo blue"></span>
              <div class="textBox">
                <div class="text">已派发</div>
                <div class="number fs20">135</div>
              </div>
            </div>
            <div class="flex items-center justify-center statusItem2">
              <span class="iconfont icon-chuzhijieguo blue"></span>
              <div class="textBox">
                <div class="text">已派发</div>
                <div class="number fs20">135</div>
              </div>
            </div>
          </div>
        </div>
        <div class="yibiao" id="yibiao1"></div>
        <div class="yibiao" id="yibiao2"></div>
      </div>
    </div>
    <div class="comModal m-b-15">
      <div class="comTitle_null flex items-center">
        <div class="titleText">通报分布</div>
      </div>
      <div class="flex tongbaoFb">
        <div class="item flex-1" id="pieEcharts1"></div>
        <div class="item flex-1" id="pieEcharts2"></div>
        <div class="item flex-1" id="pieEcharts3"></div>
      </div>
    </div>
    <div class="comModal m-b-15">
      <div class="comTitle_null flex items-center">
        <div class="titleText">各单位通报状况</div>
      </div>
      <div class="flex tongbaoStartus" id="tongbaoStartus"></div>
    </div>
    <div class="comModal p-15">
      <div class="sumDataList flex">
        <div class="flex-1 item flex items-center">
          <div class="iconbox">
            <span class="iconfont icon-paiming"></span>
          </div>
          <div class="dataBox">
            <div class="name">数据文案说明</div>
            <div class="dataText">412465</div>
          </div>
        </div>
        <div class="flex-1 item flex items-center">
          <div class="iconbox">
            <span class="iconfont icon-paiming"></span>
          </div>
          <div class="dataBox">
            <div class="name">数据文案说明</div>
            <div class="dataText">412465</div>
          </div>
        </div>
        <div class="flex-1 item flex items-center">
          <div class="iconbox">
            <span class="iconfont icon-paiming"></span>
          </div>
          <div class="dataBox">
            <div class="name">数据文案说明</div>
            <div class="dataText">412465</div>
          </div>
        </div>
        <div class="flex-1 item flex items-center">
          <div class="iconbox">
            <span class="iconfont icon-paiming"></span>
          </div>
          <div class="dataBox">
            <div class="name">数据文案说明</div>
            <div class="dataText">412465</div>
          </div>
        </div>
      </div>
      <!-- <div class="sumDataViews flex m-t-15">
        <div class="item flex-1" id="pieEcharts1"></div>
        <div class="item flex-1" id="pieEcharts2"></div>
        <div class="item flex-1" id="pieEcharts3"></div>
      </div> -->
      <div class="formBox p-l-r-15 flex wrap m-t-15">
        <div class="formItem customForm flex m-b-15">
          <label class="m-r-5">输入框</label>
          <input
            type="text"
            class="flex-1 form-control"
            placeholder="请输入用户名"
          />
        </div>
        <div class="formItem customForm flex m-l-15 m-b-15">
          <label class="m-r-5">输入搜索</label>
          <div class="flex-1 input-group searchInput">
            <input
              type="text"
              class="form-control fullWidth"
              placeholder="请输入"
            />
            <span class="iconfont icon-close-X"></span>
            <div class="input-group-addon pointer">查询</div>
          </div>
        </div>
        <div class="formItem customForm flex m-l-15 m-b-15">
          <label class="m-r-5">下拉单选</label>
          <div class="flex-1 w200">
            <select id="selectTest" class="selectpicker" title="请选择">
              <option value="1">Mustard</option>
              <option value="2">Ketchup</option>
              <option value="3">Barbecue</option>
            </select>
          </div>
        </div>
        <div class="m-l-15">
          <button class="btn btn-info btn-sm">查询</button>
        </div>
      </div>
      <div class="treeViewTable flex">
        <div class="tableTreeBox m-r-15 p-10 p-l-r-15">
          <div class="binaryTree">
            <div class="pItem">一级分类<span class="red">(112)</span></div>
            <ul>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
            </ul>
            <div class="pItem">一级分类<span class="red">(112)</span></div>
            <ul>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
              <li class="cItem">二级分类<span class="red">(112)</span></li>
            </ul>
          </div>
        </div>
        <div class="tableBox flex-1">table 表格</div>
      </div>
      <div class="treeViewTable flex m-t-15">
        <div class="tableTreeBox m-r-15 p-10 p-l-r-15">
          <div class="treeSearch">
            <input class="form-control" />
            <span class="iconfont icon-add-rs" id="showTreeOper"></span>
            <ul class="treeSearchOper">
              <li>操作一</li>
              <li>操作一</li>
              <li>操作一</li>
              <li>操作一</li>
              <li>操作一</li>
            </ul>
          </div>
          <div class="text-center m-t-10">
            <div class="btn-group self-btn-group">
              <button class="btn btn-default btn-sm">tab1</button>
              <button class="btn btn-default btn-sm">tab2</button>
            </div>
          </div>
          <div class="m-t-10" id="menuTree"></div>
        </div>
        <div class="tableBox flex-1">table 表格</div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      //   bindComEvent();
      //   initEcharts();
      initPieEcharts();
      initYibiao1();
      initYibiao2();
      initTongbaoLine();
      initTree();
      $("#showTreeOper")
        .off("click")
        .on("click", function () {
          $(this).next(".treeSearchOper").fadeToggle();
        });
      $(".treeSearchOper")
        .off("click", "li")
        .on("click", "li", function () {
          $(".treeSearchOper").fadeOut();
        });
      //   initLoginEcharts();
      //   initInfoEcharts();
    });
    function initTongbaoLine() {
      var chartDom = document.getElementById("tongbaoStartus");
      var myChart = echarts.init(chartDom);
      function getData() {
        var arr = [];
        for (var i = 0; i < 9; i++) {
          arr.push(Math.floor(Math.random() * (100 - 0 + 1)) + 0);
        }
        return arr;
      }
      var options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "高新区",
            "吴中区",
            "姑苏区",
            "相城区",
            "吴江区",
            "工业园区",
            "昆山",
            "太仓",
            "张家港",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "高新区",
            type: "bar",
            data: getData(),
          },
          {
            name: "吴中区",
            type: "bar",
            data: getData(),
          },
          {
            name: "姑苏区",
            type: "bar",
            data: getData(),
          },
          {
            name: "相城区",
            type: "bar",
            data: getData(),
          },
          {
            name: "吴江区",
            type: "bar",
            data: getData(),
          },
          {
            name: "工业园区",
            type: "bar",
            data: getData(),
          },
          {
            name: "昆山",
            type: "bar",
            data: getData(),
          },
          {
            name: "太仓",
            type: "bar",
            data: getData(),
          },
          {
            name: "张家港",
            type: "bar",
            data: getData(),
          },
        ],
      };
      myChart.setOption(options);
      window.addEventListener("resize", myChart.resize);
    }
    function initYibiao1() {
      var chartDom = document.getElementById("yibiao1");
      var myChart = echarts.init(chartDom);
      var options = {
        title: {
          show: true,
          text: "通报及时处置",
          textAlign: "auto",
          padding: 15,
          textVerticalAlign: "middle",
          left: "center",
          top: 10,
        },
        color: ["#409efe"],
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 10,
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 25,
              color: "#999",
              fontSize: 16,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              formatter: "{value}%",
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: 50,
              },
            ],
          },
        ],
      };
      myChart.setOption(options);
      window.addEventListener("resize", myChart.resize);
    }
    function initYibiao2() {
      var chartDom = document.getElementById("yibiao2");
      var myChart = echarts.init(chartDom);
      var options = {
        title: {
          show: true,
          text: "通报及时处置",
          textAlign: "auto",
          padding: 15,
          textVerticalAlign: "middle",
          left: "center",
          top: 10,
        },
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.3, "#f5555f"],
                  [0.7, "#409efe"],
                  [1, "#70db93"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -20,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -20,
              length: 20,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "inherit",
              distance: 40,
              fontSize: 16,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}%",
              color: "inherit",
              fontSize: 30,
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: 70,
              },
            ],
          },
        ],
      };
      myChart.setOption(options);
      window.addEventListener("resize", myChart.resize);
    }
    function initPieEcharts(options) {
      var chartDom1 = document.getElementById("pieEcharts1");
      var chartDom2 = document.getElementById("pieEcharts2");
      var chartDom3 = document.getElementById("pieEcharts3");
      var myChart1 = echarts.init(chartDom1);
      var myChart2 = echarts.init(chartDom2);
      var myChart3 = echarts.init(chartDom3);
      var option;
      option = {
        title: {
          text: "饼图表格名称",
          textAlign: "auto",
          padding: 15,
          textVerticalAlign: "middle",
          left: "center",
          top: "auto",
        },
        tooltip: {
          trigger: "item",
        },
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}",
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        legend: {
          left: "center",
          bottom: "0",
        },
        series: [
          {
            name: "单据状态",
            type: "pie",
            top: 15,
            radius: ["50%", "70%"],
            data: [
              { value: 1048, name: "待接收" },
              { value: 735, name: "待处置" },
              { value: 580, name: "待审核" },
              { value: 484, name: "待归档" },
              { value: 300, name: "已归档" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart1.setOption(option);
      myChart2.setOption(option);
      myChart3.setOption(option);
    }
    function initTree() {
      layui.use(function () {
        var tree = layui.tree;
        // 模拟数据
        var data = [
          {
            title: "江西",
            id: 1,
            children: [
              {
                title: "南昌",
                id: 1000,
                number: 100,
                children: [
                  { title: "青山湖区", id: 10001, number: 50 },
                  { title: "高新区", id: 10002, number: 50 },
                ],
              },
              { title: "九江", id: 1001 },
              { title: "赣州", id: 1002 },
            ],
          },
          {
            title: "广西",
            id: 2,
            children: [
              { title: "南宁", id: 2000 },
              { title: "桂林", id: 2001 },
            ],
          },
          {
            title: "陕西",
            id: 3,
            children: [
              { title: "西安", id: 3000 },
              { title: "延安", id: 3001 },
            ],
          },
          {
            title: "山西",
            id: 3,
            children: [
              { title: "太原", id: 4000 },
              { title: "长治", id: 4001 },
            ],
          },
        ];
        // 渲染
        tree.render({
          elem: "#menuTree",
          data: data,
          showLine: false, // 是否开启连接线
        });
      });
    }
  </script>
</html>
